<template>

    <Header />
    <div class="tour-detail-container">
        <el-card class="tour-card">
        <el-row>
            <el-col :span="10">
            <el-image :src="oneListDetail?.city_img" class="tour-image" />
            </el-col>
            <el-col :span="10" :offset="2">
            <h1 class="tour-title">{{ oneListDetail?.title }}</h1>
            <p class="tour-location">地点: {{ oneListDetail?.city_id }}</p>
            <p class="tour-description">{{ oneListDetail?.city_detail }}</p>
            <p class="tour-clicks">点击量: {{ oneListDetail?.hot }}</p>
            <p style="color: green;">发布者: {{ oneListDetail?.user_id }}</p>
            <!-- <p class="tour-rating">评价: {{ oneListDetail }} 星</p>暂时不添加 -->
             <p v-if="islike" @click="isLikeFun">
                <img src="../assets/like.svg" alt="喜欢" class="hcj_icon">
             </p>
             <p v-else @click="isLikeFun">
                <img src="../assets/notLike.svg" alt="喜欢" class="hcj_icon">
             </p>
            </el-col>
        </el-row>
        </el-card>


        <h1>最佳月份--{{ oneListDetail?.bast_month }}月</h1>
        <el-card class="tour-card">
        <el-row>
            <el-col :span="10">
            <h1 class="tour-title">{{ oneListDetail?.title }}</h1>
            <p class="tour-location">地点: {{ oneListDetail?.city_id }}</p>
            <p class="tour-description">{{ oneListDetail?.bast_detail }}</p>
            <p class="tour-clicks">点击量: {{ oneListDetail?.hot }}</p>
            <!-- <p class="tour-rating">评价: {{ tour.rating }} 星</p> -->
            </el-col>
            <el-col :span="10" :offset="2">
            <el-image :src="oneListDetail?.bast_detail_img" class="tour-image" />
            </el-col>
        </el-row>
        </el-card>

            <!-- <SendMessage /> -->
    </div>
    
     <Footer />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router';
import type { ListDetailForm } from '@/types/tuil'
import { CityList,LikeCityUser } from '@/api'

const islike = ref(false);
// 定义一个喜欢，用来判断页面离开时是否一直
const route = useRoute();
const id = ref(route.query.id);
const this_id =ref(0)

// 后面有时间使用pinia存储
const data = JSON.parse(localStorage.getItem("user")) ;

// 判断是否喜欢，然后点击的时候修改值
const isLikeFun = async ()=>{
  islike.value =!islike.value;
  console.log(islike.value);
  
  if(islike.value){
    const res2 =await LikeCityUser.addMyLike(this_id.value,data.email)
    console.log(res2);
  }else{
    const res1 = await LikeCityUser.deleteMyLike(this_id.value,data.email)
    console.log(res1);

  }
}

// 当页面离开的时候，或者窗口关闭的时候
// onBeforeRouteLeave( async ()=>{
//   ElMessage('页面离开')
//   // 页面离开的时候判断是否有修改
//   if(islike.value != defeltLike){
//     // 如果默认是喜欢那就删除，默认是没有喜欢就修改
   
//   }
// })


const oneListDetail = ref<ListDetailForm>()


onMounted( async ()=>{
  // 拿到id，然后通过id发送请求拿到对应对应的数据
  console.log(id.value);

  const res1 = await CityList.getOneList(id.value,data.email)
  await CityList.addTop(id.value)
  console.log(res1);
  islike.value = res1.like
  oneListDetail.value = res1;
  this_id.value = res1.id;
})



</script>

<style scoped>
.tour-detail-container {
  padding: 20px;
}

.tour-card {
  margin-bottom: 20px;
}

.tour-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.tour-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.tour-location {
  font-size: 16px;
  color: #666;
}

.tour-description {
  font-size: 16px;
  color: #666;
  margin-top: 10px;
}

.tour-clicks,
.tour-rating {
  font-size: 16px;
  color: #409EFF;
}
.hcj_icon{
  width: 30px;
}
</style> 